<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${ctx}">
<title>新增流程</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}/commons/css/common.css" />
<script type="text/javascript" src="${ctx}plugins/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript">
	var tbody;
	var flowJSON;
	$(document).ready(function() {
		//将后台传入的flowJSON转换成js中的JSON对象，即接收后台传入的JSON对象，以便在js中使用
		flowJSON = $.parseJSON('${flowJSON}');
		tbody = document.getElementById("tab").children[1];
	});
	function addRow(){
		var count = tbody.children.length;
		var trHTML = "<tr><td><input type='text' name='nodeList["+(count)+"].nodeIndex' value='"+(count+1)+"' class='inputIndex' readOnly /></td><td><input type='text' name='nodeList["+(count)+"].nodeName' value='' class='validate[required] i-text-must' style='width:100px;' /></td><td><select name='nodeList["+(count)+"].deptNo' style='width:100px;' class='i-select' onchange='selectOnChange(this)'><option value=''>未指定部门</option><c:if test='${deptMap != null }'><c:forEach var='dept' items='${deptMap }'><option value='${dept.key }'>${dept.value }</option></c:forEach></c:if></select> <select name='nodeList["+(count)+"].postNo' style='width:100px;' class='i-select' onchange='selectOnChange(this)'><option value=''>未指定岗位</option><c:if test='${postMap != null }'><c:forEach var='post' items='${postMap }'><option value='${post.key }'>${post.value }</option></c:forEach></c:if></select> <select name='nodeList["+(count)+"].userName' style='width:100px;' class='i-select' onchange='selectOnChange(this)'><option value=''>未指定用户</option><c:if test='${userMap != null }'><c:forEach var='user' items='${userMap }'><option value='${user.key }'>${user.value }</option></c:forEach></c:if></select></td><td><input type='text' name='nodeList["+(count)+"].refNodes' value='' class='validate[required] i-text-must' style='width:80px;' /></td><td><input type='text' name='nodeList["+(count)+"].memo' value='' class='i-text' style='width:200px;' /></td><td></td></tr>";
		$(tbody).append(trHTML);//在tbody最后面添加一行
		settle();
	}
	function delRow(node){
		//jquery的remove() - 删除被选元素（及其子元素）的方法真方便，直接删除自身
		$(node.parentNode.parentNode).remove();
		//然后再排序
		settle();
	}
	//操作后重新排序
	function settle(){
		var rows = tbody.children.length;
		var str = "";
 		for(var j=0;j<rows;j++){
			tbody.children[j].cells[0].children[0].value = tbody.children[j].rowIndex;
			tbody.children[j].cells[0].children[0].name = "nodeList["+j+"].nodeIndex";
			tbody.children[j].cells[1].children[0].name = "nodeList["+j+"].nodeName";
			tbody.children[j].cells[2].children[0].name = "nodeList["+j+"].deptNo";
			tbody.children[j].cells[2].children[1].name = "nodeList["+j+"].postNo";
			tbody.children[j].cells[2].children[2].name = "nodeList["+j+"].userName";
			tbody.children[j].cells[3].children[0].name = "nodeList["+j+"].refNodes";
			tbody.children[j].cells[4].children[0].name = "nodeList["+j+"].memo";
 			if(j==0 && j!=rows-1 || j!=rows-1){
				str = str + "<a href='javascript:void(0)' onclick='downRow(this)' class='arrows'>⇩</a> ";
 			}
 			if(j!=0 || j!=0 && j==rows-1){
				str = str + "<a href='javascript:void(0)' onclick='upRow(this)' class='arrows'>⇧</a> ";
 			}
			tbody.children[j].cells[5].innerHTML = str + "&nbsp;<a href='javascript:void(0)' onclick='delRow(this)'>删除</a>";
 			str = "";
 		}
	}
	function downRow(node){
		//node.parentNode.parentNode为获取该行<TR>的节点
		//jquery的这个方法真的很方便，只要将要移动的元素插到指定的位置，它就去了。
		//next() - 为返回该元素的下一个兄弟节点，after() - 在被选元素之后插入内容
		$(node.parentNode.parentNode).next().after(node.parentNode.parentNode);
		settle();
	}
	function upRow(node){
		//prev() - 为返回该元素的上一个兄弟节点，before() - 在被选元素之前插入内容
		$(node.parentNode.parentNode).prev().before(node.parentNode.parentNode);
		settle();
	}
	function checkCode(){
		var code = $.trim($("#flowCode").val()).toUpperCase();
		var reg = /^[a-zA-Z]{1}[a-zA-z,_]{2,}$/;
		if(!code){
			$("#codeSpan").html("*必填(如：TESTING_PROCESS)");
			return false;
		}
		if(!reg.test(code)){
			$("#codeSpan").html("字母和下划线，并不少于3个字符");
			return false;
		}
		if(flowJSON[code]){
			$("#codeSpan").html("该编号已存在！");
			return false;
		};
		$("#codeSpan").html("");
		return true;
	}
	function checkName(){
		var name = $.trim($("#flowName").val());
		if(!name){
			$("#nameSpan").html("*此处不可为空！");
			return false;
		}
		if(JSON.stringify(flowJSON).indexOf(name) >= 0){
			$("#nameSpan").html("该名称已存在！");
			return false;
		};
		$("#nameSpan").html("");
		return true;
	}
	function checkData(){
		if("" == $("#typeCode").val()){
			$("#flowSpan").html("请选择流程类型");
			return false;
		}
		$("#flowSpan").html("");
		if(!checkCode()){
			return false;
		}
		if(!checkName()){
			return false;
		}
		var tbody = document.getElementById("tab").children[1];
		if(tbody.children.length){
			for(var i=0;i<tbody.children.length;i++){
				if(!$.trim($("input[name='nodeList["+i+"].nodeName']").val())){
					$("#nodeSpan").html("节点名称不可为空！");
					return false;
				}
				var dept = $("select[name='nodeList["+i+"].deptNo']").val();
				var post = $("select[name='nodeList["+i+"].postNo']").val();
				var user = $("select[name='nodeList["+i+"].userName']").val();
				if(!$.trim(dept) && !$.trim(post) && !$.trim(user)){
					$("#nodeSpan").html("办理人设置至少要指定一项！");
					return false;
				}
				var refNodes = $("input[name='nodeList["+i+"].refNodes']").val();
				reg = /^[1-9]\d?(\|[1-9]\d?)*$/;
				if($.trim(refNodes) && !reg.test(refNodes)){
					$("#nodeSpan").html("参考节点填写格式不正确！(多个节点序号用“|”分开)");
					return false;
				}
			}
			$("#nodeSpan").html("");
			$("#formId").submit();
		}else
			$("#nodeSpan").html("创建无操作的流程是没有意义的！");
			return false;
	}
	function selectOnChange(obj){
		if($(obj).get(0).selectedIndex){
			$(obj).css("background-color","#ADCEFA");
		}else{
			$(obj).css("background-color","#FFFFFF");
		}
	}
</script>
<style type="text/css">
	#tab tr td{text-align: center;}
	.inputIndex{width:20px;border-width:0px;background-color:#FAFAFA;text-align:center;}
	select option{
		background-color:#FFFFFF;
	}
	.arrows{font-size: 3ex;font-weight: bold;}
</style>
</head>
<body>
	<h3 class="fn-mt7">新增流程<span id="flowSpan" style="color: red;padding-left: 200px;"></span></h3>
	<c:if test="${resultMsg != null}">
		<div class="tip-div">
			<div <c:choose><c:when test="${success}">class="tip-success"</c:when><c:otherwise>class="tip-warn"</c:otherwise></c:choose>><div class="tip-content">${resultMsg }</div></div>
		</div>
	</c:if>
	<div class="tb-table">
		<form id="formId" action="addFlow.htm" method="POST">
			<table>
				<tr>
					<th width="9%">选择分类：</th>
					<td width="12%"><select id="typeCode" name="typeCode" class="i-select" style="width:100px;" onchange="selectOnChange(this)">
							<option value="">全部</option>
							<c:if test="${!empty ftMap}">
								<c:forEach var="ft" items="${ftMap }">
									<option value="${ft.key}">${ft.value}</option>
								</c:forEach>
							</c:if>
						</select></td>
					<th width="9%">流程描述：</th>
					<td colspan="5"><input type="text" class="i-text" id="memo" name="memo" value="" style="width:99%"/></td>
				</tr>
				<tr>
					<th>设置状态：</th>
					<td><select id="status" name="status" class="i-select" style="width:100px;" onchange="selectOnChange(this)">
							<option value="0">未使用</option>
							<option value="1">使用中</option>
							</select></td>
					<th>流程编号：</th>
					<td colspan="2"><input type="text" class="validate[required] i-text-must" id="flowCode" name="flowCode" value="" onchange="checkCode()"/>
						<span id="codeSpan" style="color: red"></span></td>
					<th width="9%">流程名称：</th>
					<td colspan="2"><input type="text" class="validate[required] i-text-must" id="flowName" name="flowName" value="" onblur="checkName()"/>
						<span id="nameSpan" style="color: red"></span></td>
				</tr>
			</table>
			<h3 class="fn-mt7">
				<span style="float: left; font-size: 14px; font-weight: bold;">节点信息管理</span>
				<span id="nodeSpan" style="color: red;padding-left: 180px;"></span>
				<br style="height: 0; clear: both;" />
			</h3>
			<div class="tb-table">
				<table id="tab">
					<thead>
						<tr>
							<th width="30">序号</th>
							<th width="100">节点名称</th>
							<th width="310">操作人设置</th>
							<th width="60">参考节点</th>
							<th>节点描述</th>
							<th width="75">操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<div align="center">
					<span class="btn" style="float: right;"><input type="button" value=" ╋  节点" onclick="addRow()" /></span><br>
					<span class="btn" id="savBtn"><input type="button" value="提  交" onclick="checkData()" /></span>&emsp;
					<span class="btn"><input type="button" value="退  出" onclick="parent.$.fancybox.close()" /></span>
				</div>
			</div>
		</form>
	</div>
	<font size="3" style="color: green;font-weight: bold;">提示：</font><br>
	<div style="margin-left: 33px;">
		<font size="2">
		1.节点名称：为*必填项*。<br>
		2.操作人：此栏*必须至少选择一项*，如果选择了指定用户，则无须选择部门和岗位。<br>
		3.参考节点：即所填写的参考节点通过之后，才会流到该节点操作。填写规范：节点序号[|节点序号]，如：1、2|3、1|2|3。<br>
		4.节点描述：即该节点的操作说明，必要时应该填写。
		</font>
	</div>
</body>
</html>